<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <el-button type="primary">添加角色</el-button>
            <el-table :data="rolesData" stripe style="width: 100%" border>
                <!-- expand展开列 -->
                <el-table-column type="expand">
                    <!-- 用作用域插槽操作每一行数据 -->
                    <template slot-scope="scope">
                        <!-- 行  默认一行分为24列-->
                        <!-- <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p> -->
                        <el-row  v-for="(item1,i1) in scope.row.children" :key="item1.id" :class="['bottom',i1 === 0 ? 'top':'']">
                            <!-- 列 -->
                            <!-- 第一列放一级标签 -->
                            <!-- 一级区域 -->
                            <el-col :span="5">
                                <!-- pre标签可以梳理树形结构 -->
                                <!-- <pre>{{scope.row}}</pre> -->
                                <!--  标签 -->
                                <el-tag closable @close="removeTag(scope.row,item1.id)">{{item1.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <!-- 二级和三级区域 -->
                            <el-col :span="19">
                                <el-row v-for="(item2,i2) in item1.children" :key="item2.id" :class="[i2===0?'':'top']">
                                    <el-col :span="6">
                                        <el-tag closable type="success" @close="removeTag(scope.row,item2.id)">{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tag @close="removeTag(scope.row,item3.id)" closable type="warning" v-for="(item3,i3) in item2.children" :key="item3.id">{{item3.authName}}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <!-- index索引列 -->
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="roleName" label="角色名称"> </el-table-column>
                <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
                <el-table-column prop="date" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                        <el-button type="warning" icon="el-icon-setting" size="mini" @click="distributionlist(scope.row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分配权限对话框 -->
        <!-- 如果关闭分配权限不清空上一节点下的三级节点的ID就会往后追加节点 -->
        <el-dialog title="分配权限" :visible.sync="distributionVisible" width="30%" @close="cleardistributionkeys">
            <!-- show-checkbox 节点是否可被选择 -->
            <!-- node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 -->
            <!-- default-expand-all	是否默认展开所有节点 -->
            <!-- default-checked-keys	默认勾选的节点的 key 的数组 数组里的数据就会被选中 -->
            <el-tree :data="distributionFrom" ref="distributionRef" show-checkbox node-key="id" default-expand-all :default-checked-keys="distributionkeys" :props="distributionProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="distributionVisible = false">取 消</el-button>
                <el-button type="primary" @click="distributionfenpei">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                rolesData:[],
                // 分配权限对话框是否显示
                distributionVisible: false,
                distributionFrom:[],
                // 树形控件属性绑定对象 ele规定
                distributionProps:{
                    // 父子节点通过哪个属性来实现
                    children: 'children',
                    // 看到的是哪个属性对应的值
                    label: 'authName'
                },
                // 默认展开的节点的 key 的数组 数组里的数据就会被选中
                distributionkeys:[],
                // 角色ID
                roleID:''
            }
        },
        // 在实例创建完成后立即调用
        created() {
            this.getaddrole()
        },
        methods:{
            async getaddrole() {
               const {data: res} = await this.$http.get('roles')
               if(res.meta.status !== 200)return this.$message.error('获取角色列表失败')
               this.rolesData = res.data
            },
            async removeTag(roles,id) {
                const resstr = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>err)
                // console.log(res);
                if(resstr != 'confirm')return this.$message.info('删除已取消')
                // console.log('确定删除');
                // roles/:roleId/rights/:rightId | :roleId  | 角色 ID  | 不能为空`携带在url中` | :rightId | 权限 ID  | 不能为空`携带在url中` |
                const {data: res} = await this.$http.delete(`roles/${roles.id}/rights/${id}`)
                console.log(res);
                if(res.meta.status !== 200)return this.$message.error(res.meta.msg)
                // 不能直接请求角色列表不然角色下面的expand权限会关闭
                // this.getRolesList()
                //  - 返回的data, 是当前角色下最新的权限数据
                roles.children = res.data
            },
            async distributionlist(role) {
                this.roleID = role.id
                // console.log(role);
                // 获取所有权限列表
                const {data: res}= await this.$http.get('rights/tree')
                if(res.meta.status !==200)return this.$message.erroe(res.meta.msg)
                this.distributionFrom = res.data
                // 通过递归拿到三级节点的id
                this.recursion(role, this.distributionkeys)
                // console.log(this.distributionkeys);
                this.distributionVisible=true
            },
            // 递归函数
            // node节点,arr保存的数组
            recursion(node, arr) {
                // 如果节点下面没有children说明他是个三级节点   把三级节点拥有的ID给arr
                if(!node.children){
                    return arr.push(node.id)
                }
                // 主要是判断他有没有children节点 所以循环用node.children
                node.children.forEach(item=>{
                    this.recursion(item,arr)
                })
            },
            // 每次关闭都要清空三级节点下的ID  不然array里越装越多
            cleardistributionkeys() {
                this.distributionkeys=[]
            },
            // 角色授权
            async distributionfenpei() {
                // 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
                // let bar = { a: 1, b: 2 };
                // let baz = { ...bar }; // { a: 1, b: 2 }
                // 点击确定拿到选中和半选中的节点
                const rids=[
                    ...this.$refs.distributionRef.getCheckedKeys(),
                    ...this.$refs.distributionRef.getHalfCheckedKeys()
                ]
                // | rids    | 权限 ID 列表（字符串） | 以 `,` 分割的权限 ID 列表（获取所有被选中、叶子节点的key和半选中节点的key, 包括 1，2，3级节点） |
                const ridstr = rids.join(',')
                // console.log(ridstr);
                // getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
                // getHalfCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组
                const {data: res} = await this.$http.post(`roles/${this.roleID}/rights`,{rids:ridstr})
                console.log(res);
                if(res.meta.status !== 200)return this.$message.error(res.meta.msg)
                this.$message.success('分配权限成功！')
                this.getaddrole()
                this.distributionVisible = false
            }
        }

    }
</script>
<style lang="less" scoped>
.top{
    border-top: 1px solid #eee;
}
.bottom{
    border-bottom: 1px solid #eee;
}
.el-tag {
    margin: 7px;
}
.el-row {
    display: flex;
    align-items: center;
}
</style>